//Medium Editor
.medium-editor-toolbar,
.medium-editor-toolbar-form,
.medium-editor-toolbar-actions,
.medium-editor-toolbar-anchor-preview {
  background-color: $brand-primary;
  border-radius: $btn-border-radius;
  box-shadow: $btn-box-shadow;
}

.medium-editor-toolbar {
  max-width: 80%;
  box-shadow: none;
  .medium-editor-toolbar-actions {
    overflow: hidden;
  }

  .medium-editor-action {
    @extend .btn.btn-primary;
    height: $medium-editor-button-size;
    padding: $btn-padding-y $btn-group-button-padding-x;
    box-shadow: none;
    border-radius: 0;

    &.medium-editor-button-active {
      background-color: darken($brand-primary, 15%);
    }
  }
}

.medium-editor-toolbar-form {
  color: $white;
  overflow: hidden;

  .medium-editor-toolbar-input {
    height: $medium-editor-button-size;
    background: $brand-primary;
    box-sizing: border-box;
    color: $white;
    padding-left: 16px;
    width: 220px;

    &::-webkit-input-placeholder {
      color: rgba($white, .8);
    }
    &:-moz-placeholder { /* Firefox 18- */
      color: rgba($white, .8);
    }
    &::-moz-placeholder { /* Firefox 19+ */
      color: rgba($white, .8);
    }
    &:-ms-input-placeholder {
      color: rgba($white, .8);
    }
  }

  a {
    color: $white;
    transform: translateY(2px);
  }

  .medium-editor-toolbar-close {
    margin-right: 16px;
  }
}

.medium-toolbar-arrow-under:after {
  border-color: $brand-primary transparent transparent transparent;
  top: $medium-editor-button-size;
}

.medium-toolbar-arrow-over:before {
  border-color: transparent transparent $brand-primary transparent;
}

.medium-editor-toolbar-anchor-preview {
  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
  .medium-editor-toolbar-anchor-preview {
    margin: 0;
  }
}

.medium-editor-anchor-preview {
  max-width: 50%;
  a {
    color: $white;
    text-decoration: none;
  }
}

//v-tooltip

.tooltip.vuestic-tooltip {
  @extend .tooltip.show;

  .tooltip-inner {
    box-shadow: $tooltip-box-shadow;
    line-height: $tooltip-line-height;
    font-weight: $tooltip-font-weight;
    border-radius: 0;
  }

  .tooltip-arrow {
    @extend .arrow;
  }

  &[x-placement^="top"] {
    @extend .bs-tooltip-top;
  }

  &[x-placement^="bottom"] {
    @extend .bs-tooltip-bottom;
  }

  &[x-placement^="right"] {
    @extend .bs-tooltip-right;
    margin-left: .15rem;
  }

  &[x-placement^="left"] {
    @extend .bs-tooltip-left;
    margin-right: .15rem;
  }

  &.popover {
    line-height: $popover-line-height;
    box-shadow: $popover-box-shadow;

    .popover-header, .popover-body {
      text-align: left;
      padding-right: 0;
    }

    .popover-inner {
      max-width: 100%;
      box-shadow: none;

      > * {
        display: flex;
        flex-direction: row;
      }
    }

    .popover-header {
      font-weight: $popover-header-font-weight;
    }

    .popover-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      color: $popover-icon-color;
      font-size: $popover-icon-size;
    }

    .popover-content:first-child {
      .popover-header, .popover-body {
        padding: $popover-body-padding-y $popover-header-no-icon-padding-x;
        padding-right: 0;
      }
    }

    &[x-placement^="top"] {
      @extend .bs-popover-top;
    }

    &[x-placement^="bottom"] {
      @extend .bs-popover-bottom;
    }

    &[x-placement^="right"] {
      @extend .bs-popover-right;
    }

    &[x-placement^="left"] {
      @extend .bs-popover-left;
    }
  }
}

//vue-toasted

.toasted-container {
  &.full-width {
    @include media-breakpoint-down(md) {
      width: calc(100% - #{$content-mobile-wrap-pl} - #{$content-mobile-wrap-pr});
      left: 0;

      .toasted.vuestic-toast {
        left: $content-mobile-wrap-pl;
      }
    }
  }
}

.toasted.vuestic-toast {
  min-height: $toast-min-height;
  padding: $toast-padding-y $toast-padding-x;
  font-size: $toast-font-size;
  font-weight: $toast-font-weight;
  line-height: $toast-line-height;
  background: rgba($toast-bg, 0.9);
  box-shadow: $toast-box-shadow;
  color: $toast-color;
  border-radius: $toast-border-radius;

  i, i.fa {
    font-size: $toast-icon-size;
    color: $toast-icon-color;
    margin-left: $toast-icon-ml;
    margin-right: $toast-icon-mr;
  }

  a.action:hover {
    text-decoration: none;
  }
}
